<template>
    <div class="app-container">
        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
            <el-col :span="6">
                <el-form-item label="业务类型" prop="bizType">
                    <el-select style="width: 260px" v-model="queryParams.bizType" filterable placeholder="请选择业务类型" clearable>
                        <el-option v-for="dict in dict.type.bus_flow_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </SearchContent>

        <div class="card-wrap paddingAll20" :model="queryParams" ref="queryForm" label-width="86px">
            <div class="table-title-wrap justify-end">
                <el-button v-hasPermi="['formConfig:setting:add']" type="primary" size="mini" @click="addForm">新增</el-button>
            </div>
            <el-table
                v-loading="loading"
                :data="basicList"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                <template slot="empty">
                    <el-empty :image-size="50" description="暂无表单设置信息"></el-empty>
                </template>
                <el-table-column
                    align="center"
                    prop="bizType"
                    label="业务类型"
                    min-width="180">
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.bus_flow_type" :value="row.bizType"/>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="remark"
                    label="备注"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="createBy"
                    label="创建人"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="updateTime"
                    label="更新时间"
                    min-width="180">
                </el-table-column>

                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="left">
                    <template v-slot="{ row }">
                        <el-button v-hasPermi="['formConfig:setting:config']" size="small" type="text"
                                   @click="goDetail(row)">配置
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                        @pagination="getList"/>
        </div>

        <el-dialog title="新增表单设置" :visible.sync="dialogFormVisible" width="500px" label-position="right">
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="业务类型" label-width="120px" prop="bizType">
                    <el-select style="width: 300px" v-model="form.bizType" placeholder="请选择业务类型" clearable>
                        <el-option v-for="dict in dict.type.bus_flow_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" label-width="120px">
                    <el-input type="textarea" style="width: 300px" v-model="form.remark" placeholder="请输入备注" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">提 交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as formSettingApi from "@/api/formConfig/formSetting";

export default {
    name: 'FormDefinition',
    dicts: ['bus_flow_type'],
    components:{
        SearchContent
    },
    data() {
        return {
            dialogFormVisible: false,
            loading: false, // 加载标识
            showSearch: true,
            // 总条数
            total: 0,
            // 工单数据
            basicList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                busFormName: null,
                bizType: null,
            },
            form: {
                bizType: null,
                callingMethod: null,
                remark: null,
            },
            rules: {
                bizType: [
                    {required: true, message: '请选择业务类型', trigger: 'change'},
                ]
            },
        }
    },
    mounted() {
        this.getList();
    },
    // 方法集合
    methods: {
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.$refs.queryForm.resetFields();
            this.handleQuery();
        },
        getList() {
            this.loading = true;
            formSettingApi.busSetlist(this.queryParams).then(res => {
                this.loading = false;
                this.total = res.total;
                this.basicList = res.rows;
            })
        },
        // 新增
        addForm() {
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs.form.resetFields()
            })
        },

        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    formSettingApi.busSetAdd(this.form).then(res => {
                        this.dialogFormVisible = false
                        this.handleQuery();
                    })
                }
            })
        },
        goDetail(row) {
            this.$router.push({name: 'SettingList', query: {flowBusId: row.id, bizType: row.bizType}})
        },

    }

}
</script>

<style lang="scss" scoped>
</style>
